<!-- ajax加载一级导航数据，二级导航数据 -->
<script>
$(function(){
		//通过事件委托方式绑定元素
		//绑定li元素，鼠标指针悬停在该元素时，则触发回调函数
		$(".nav-menu").on("mouseover","li",function(){
			$(this).find(".sub-Menu").show();
		})
		//绑定li元素，鼠标指针离开该元素时，则触发该函数
		$(".nav-menu").on("mouseout","li",function(){
			$(this).find(".sub-Menu").hide();
		})
		//发送ajax请求，获取一级,二级导航下拉数据
		$.post("${ctx}/customer/getAjaxMenu",
				function(data){
				for(var i=0;i<data.length;i++){
					//加载一级导航(7个)
					if(i<7){
						var maxLi = $("<li></li>");
						//创建a元素
						$("<a></a>").text(data[i].maxType.name).attr("href","${ctx}/customer/goods/showGoodsList?goodsType.code="+data[i].maxType.code).appendTo(maxLi);
						//创建ul元素
						var ul = $("<ul></ul>").addClass("sub-Menu");
						//创建li元素
						var minTypes = data[i].minType;
						//遍历读取小类型
						for(var m=0;m<minTypes.length;m++){
							var li = $("<li></li>");
							
							$("<a></a>").text(minTypes[m].name).attr("href","${ctx}/customer/goods/showGoodsList?goodsType.code="+minTypes[m].code).appendTo(li);
							//把li元素拼接到ul元素中
							li.appendTo(ul);
						} 
						//把ul元素与a元素拼接到li元素中
						ul.appendTo(maxLi);
						//把拼接后完整的li元素，再追加到class='nav-menu'元素中
						maxLi.appendTo(".nav-menu");
		    		}else if(i==7){
		    			
		 				var li = $("<li></li>");
		 				$("<a></a>").text("更多").addClass("gd_").appendTo(li);
		 				$("<div id='more'></div>").addClass("sub-Menu tc").appendTo(li);
		 				li.appendTo(".nav-menu");
		    		}else{
		    				//创建div元素并设置class
							var divEle = $("<div></div>").addClass("lx_");
		    				//创建a元素并设置href属性
							var aEle = $("<a></a>").attr("href","#####");
		    				//创建span元素并设置文本值
							var spanEle = $("<span></span>").text(data[i].maxType.name);
							//把span元素追加到a元素内
		    				spanEle.appendTo(aEle);
							//把a元素追加到div元素内
							aEle.appendTo(divEle);
							//把div元素追加到id=more的元素中
							divEle.appendTo("#more");
		    		}
					
				}
		});


})
</script>
<div class="nav">
		<div class="container">
			<ul class="nav-menu">
				<!-- 主菜单 -->
				<li id="home" class="active">
					<a href="index.html">首  页</a>
				</li>
				<!-- 主菜单 -->
				
			</ul>
		</div>
	</div>